<template>
  <!-- 弹出框  购物车 -->
  <div class="dialog" v-if="show">
    <van-action-sheet :value="show" class="action-sheet">
      <div class="close" @click="close"><img :src="Xpng" /></div>
      <div class="dialog_area">
        <div class="dialog_area_top">
          <div class="goods_block">
            <span class="left">
              <!-- <div class='box' > 
              <img src="https://image.hezongyy.com/pcimage/20211109img/jtj_h5_119jx.png" alt="" />
            </div> -->
              <!-- <div class='box_price1'>119精选</div> -->
              <!-- </div> -->
              <div class="picture">
                <img
                  class="pictureTopItem"
                  v-show="!everyDayInfo.picture"
                  src="https://image.hezongyy.com/pcimage/119h5/zhuanQu_H5_dalog_imgNotFound280.jpg"
                  alt=""
                />
                <img class="pictureTop" :src="everyDayInfo.picture" />
                <div class="advertTag">
                  <img
                    v-show="everyDayInfo.onSalePictureURL"
                    :src="everyDayInfo.onSalePictureURL"
                  />
                </div>
                <div v-if="everyDayInfo.giftExists == 1">
                  <img
                    class="hgimg"
                    v-show="
                      everyDayInfo.giftType == 0 &&
                      everyDayInfo.isPreviewGift == 0
                    "
                    src="https://image.hezongyy.com/pcimage/119h5/appH5_dlsmz.png"
                    alt=""
                  />
                  <img
                    class="hgimg"
                    src="https://image.hezongyy.com/pcimage/119h5/appH5_dlshg.png"
                    alt=""
                  />
                  <!-- v-show="
                      everyDayInfo.giftType == 1 &&
                      everyDayInfo.isPreviewGift == 0
                    " -->
                  <img
                    class="hgimg"
                    v-show="
                      everyDayInfo.giftType == 0 &&
                      everyDayInfo.isPreviewGift == 1
                    "
                    src="https://image.hezongyy.com/pcimage/119h5/appH5_dlygmz.png"
                    alt=""
                  />
                  <img
                    class="hgimg"
                    v-show="
                      everyDayInfo.giftType == 1 &&
                      everyDayInfo.isPreviewGift == 1
                    "
                    src="https://image.hezongyy.com/pcimage/119h5/appH5_dlyghg.png"
                    alt=""
                  />
                  <!-- <div
                v-show="
                  everyDayInfo.giftType == 0 && everyDayInfo.isPreviewGift == 0
                "
                class="box_price1"
              >
                <div class="boxPrice1Left font12 boxPrice1Width">买赠</div>
              </div> -->

                  <div
                    v-show="
                      everyDayInfo.giftType == 1 &&
                      everyDayInfo.isPreviewGift == 0
                    "
                    class="box_price1"
                  >
                    <div class="boxPrice1Left">
                      <!-- <span class="font12">换购价</span> -->
                    </div>
                    <div
                      class="boxPrice1Right"
                      v-if="everyDayInfo.giftPrice != 0"
                    >
                      <span class="font8">￥</span>
                      <span class="font18">{{
                        (everyDayInfo.giftPrice.toFixed(2) + "").split(".")[0]
                      }}</span>
                      <span class="font18"
                        >.{{
                          (everyDayInfo.giftPrice.toFixed(2) + "").split(".")[0]
                        }}</span
                      >
                    </div>
                  </div>

                  <div
                    class="box_price1"
                    v-show="
                      everyDayInfo.isSwap == 17 &&
                      everyDayInfo.isPreviewGift == 1
                    "
                  >
                    <div class="boxPrice1Left">
                      <!-- <span class="font12 tex">预告</span>
                  <span class="font12" style="margin-top: -2px">换购价</span> -->
                    </div>
                    <div
                      class="boxPrice1Right"
                      v-if="everyDayInfo.giftPrice != 0"
                    >
                      <span class="font8">￥</span>
                      <span class="font18">{{
                        (everyDayInfo.giftPrice.toFixed(2) + "").split(".")[0]
                      }}</span>
                      <span class="font18"
                        >.{{
                          (everyDayInfo.giftPrice.toFixed(2) + "").split(".")[0]
                        }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </span>
            <span class="right">
              <div class="text1">{{ everyDayInfo.name }}</div>
              <div class="text2" v-if="everyDayInfo.priceType == 7">
                <div class="text2_left fw500">
                  <span>
                    <span v-if="everyDayInfo.sellingPrice > 0">
                      <!-- <span class="dolTeg fonts12">特卖价</span> -->
                      <span class="font12">￥</span>
                      <span class="font18">{{
                        everyDayInfo.sellingPrice
                      }}</span>
                    </span>
                    <span
                      class="fs16"
                      v-else-if="everyDayInfo.sellingPrice == -1"
                      >加盟可见</span
                    >
                    <span class="fs16" v-else>定价中</span>
                  </span>
                </div>
              </div>
              <div v-else>
                <div class="text2">
                  <span
                    class="text2_left mr"
                    v-if="
                      everyDayInfo.priceType > 0 &&
                      everyDayInfo.priceType <= 6 &&
                      everyDayInfo.priceType != 4 &&
                      everyDayInfo.priceType != 5 &&
                      everyDayInfo.coupon == 0 &&
                      everyDayInfo.sellingPrice != -2
                    "
                  >
                    <span class="font12">{{
                      setPrice
                        .setPrice(
                          everyDayInfo.sellingPrice,
                          everyDayInfo.priceType
                        )
                        .split("￥")[0]
                    }}</span>
                    <span
                      :class="{
                        fw500:
                          everyDayInfo.priceType == 1 ||
                          everyDayInfo.priceType == 6,
                        font12: true,
                      }"
                      >￥</span
                    >
                    <span
                      :class="{
                        fw500:
                          everyDayInfo.priceType == 1 ||
                          everyDayInfo.priceType == 6,
                        font18: true,
                      }"
                      >{{
                        setPrice
                          .setPrice(
                            everyDayInfo.sellingPrice,
                            everyDayInfo.priceType
                          )
                          .split("￥")[1]
                      }}</span
                    >
                  </span>
                  <span
                    class="text2_left mr"
                    v-else-if="
                      (everyDayInfo.priceType == 4 || everyDayInfo.priceType == 5)
                    "
                  >
                    <span class="dolTeg fonts12">活动价</span>
                    <span class="fonts12">￥</span>
                    <span class="font18">{{ everyDayInfo.sellingPrice == -2 ? everyDayInfo.tieredSellingPrice :  everyDayInfo.sellingPrice }}</span>
                  </span>
                  <!-- <span
                class="text2_left fw"
                v-else-if="
                  everyDayInfo.coupon == 0 &&
                  (everyDayInfo.priceType == 4 ||
                    everyDayInfo.priceType == 5) &&
                  everyDayInfo.sellingPrice == -2
                "
              >
                <span>活动价</span>
                <span class="fw">￥</span>
                <span class="fw fs16">{{ everyDayInfo.tieredSellingPrice }}</span>
              </span> -->
                  <span
                    class="text2_left fw500 fs16"
                    v-else-if="everyDayInfo.sellingPrice == -1"
                    >加盟可见</span
                  >
                  <span
                    class="text2_left fw500 fs16"
                    v-else-if="everyDayInfo.sellingPrice == 0"
                    >定价中</span
                  >
                  <span
                    class="colorf34 font14"
                    v-if="
                      everyDayInfo.retailPrice > 0 &&
                      everyDayInfo.sellingPrice != -1 &&
                      everyDayInfo.sellingPrice != 0 &&
                      everyDayInfo.sellingPrice == everyDayInfo.retailPrice &&
                      everyDayInfo.coupon == 1
                    "
                    ><span class="font14">￥</span
                    >{{ everyDayInfo.retailPrice }}</span
                  >
                  <span
                    class="color333 font14 th"
                    v-if="
                      everyDayInfo.retailPrice > 0 &&
                      everyDayInfo.sellingPrice != -1 &&
                      everyDayInfo.sellingPrice != 0 &&
                      everyDayInfo.sellingPrice != everyDayInfo.retailPrice &&
                      everyDayInfo.sellingPrice != -2
                    "
                    >￥{{ everyDayInfo.retailPrice }}</span
                  >
                </div>
                <div class="mb6">
                  <span
                    class="text2_left colorf34 font14 "
                    v-if="
                      everyDayInfo.coupon == 1 &&
                      everyDayInfo.priceType != 2 &&
                      everyDayInfo.priceType != 3 &&
                      everyDayInfo.sellingPrice == -2 &&
                      everyDayInfo.tieredCouponFloorPrice > 0
                    "
                  >
                    <span class="font14">券后&nbsp;</span>￥{{ everyDayInfo.tieredCouponFloorPrice }}
                        ~￥{{
                          everyDayInfo.tieredCouponCeilingPrice
                        }}
                    <!-- <span v-show="everyDayInfo.couponFloorPrice > 0">起</span> -->
                  </span>
                </div>
                <div
                  class="textVip"
                  v-show="
                    everyDayInfo.priceType != 2 &&
                    everyDayInfo.priceType != 3 &&
                    everyDayInfo.fistClassPrice > 0 &&
                    everyDayInfo.fistClassVisible == 1
                  "
                >
                  <span class="fw500"
                    >￥{{
                      everyDayInfo.fistClassCoupon == 1
                        ? everyDayInfo.fistClassFloorPrice.toFixed(2)
                        : everyDayInfo.fistClassPrice.toFixed(2)
                    }}起</span
                  >
                  <img
                    src="https://image.hezongyy.com/pcimage/119h5/app_vip.png"
                    alt=""
                  />
                </div>
                <div class="mb">
                  <span
                    class="text2_left colorf34"
                    v-if="
                      everyDayInfo.coupon == 1 &&
                      everyDayInfo.priceType != 2 &&
                      everyDayInfo.priceType != 3 &&
                      everyDayInfo.sellingPrice != -2 &&
                      everyDayInfo.couponFloorPrice > 0
                    "
                  >
                    <span
                      :class="{
                        fw500:
                          everyDayInfo.couponFloorPrice == 0 ||
                          everyDayInfo.couponFloorPrice == -1,
                        font18:
                          everyDayInfo.couponFloorPrice == 0 ||
                          everyDayInfo.couponFloorPrice == -1,
                        font14:
                          everyDayInfo.couponFloorPrice != 0 &&
                          everyDayInfo.couponFloorPrice != -1,
                      }"
                      >{{
                        showCouponPrice(everyDayInfo.couponFloorPrice).split(
                          "￥"
                        )[0]
                      }}</span
                    >
                    <span
                      class="font14"
                      v-show="
                        everyDayInfo.couponFloorPrice != 0 &&
                        everyDayInfo.couponFloorPrice != -1
                      "
                      >￥</span
                    >
                    <span class="font14">{{
                      showCouponPrice(everyDayInfo.couponFloorPrice).split(
                        "￥"
                      )[1]
                    }}</span>
                    <span
                      class="font14"
                      v-show="
                        everyDayInfo.priceType != 1 &&
                        everyDayInfo.priceType != 6
                      "
                      >起</span
                    >
                    <!-- <span v-show="everyDayInfo.couponFloorPrice > 0">起</span> -->
                  </span>
                </div>

                <div
                  class="text3"
                  v-if="
                    everyDayInfo.sellingPrice != -1 &&
                    everyDayInfo.marketPrice > 0
                  "
                >
                  建议零售价：¥{{ everyDayInfo.marketPrice }}
                </div>
              </div>
            </span>
          </div>
          <div
            class="ladder_block"
            v-if="
              everyDayInfo.sellingPrice == -2 &&
              everyDayInfo.onSaleTieredPriceList
            "
          >
            <!-- <div class="title">
            <span class="left">阶梯价</span>
            <span
              class="center"
              v-if="
                everyDayInfo.tieredPricingRules &&
                everyDayInfo.tieredPricingRules[0].priceCeil > 0
              "
              >券后</span
            >
            <span class="right">购买量</span>
          </div> -->
            <div
              class="text"
              v-for="(e, index) of everyDayInfo.onSaleTieredPriceList"
              :key="index"
            >
              <span class="price fw">￥{{ e.sellingPrice }}</span>
              <span class="quantity" v-if="e.endQuantity != 0"
                >{{ e.startQuantity }}~{{ e.endQuantity }}盒</span
              >
              <span class="quantity" v-else>{{ e.startQuantity }}盒起</span>
              <!-- <span class="left">¥{{ item.sellingPrice }}</span>

            <span
              class="center"
              v-if="item.priceFloor > 0 && item.priceCeil > 0"
              >{{ "¥" + item.priceFloor + "~" + "¥" + item.priceCeil }}</span
            >
            <span
              class="center"
              v-if="item.priceFloor == 0 && item.priceCeil > 0"
              >{{ "¥" + item.priceCeil }}</span
            >

            <span class="right">{{
              getNum(item.quantity, index, everyDayInfo)
            }}</span> -->
            </div>
          </div>
          <!-- //优惠信息 -->
          <div class="info_block_discount">
            <!-- 优惠之前的逻辑 -->
            <!-- v-if="
            everyDayInfo.goodsPriceStruct &&
            everyDayInfo.goodsPriceStruct.multiPrice &&
            (everyDayInfo.goodsPriceStruct.multiPrice.neverBuyPriceGoods ||
              everyDayInfo.goodsPriceStruct.multiPrice.promotionInfo)
          " -->
            <div class="title">优惠</div>
            <div class="titleTeg">
              <div v-for="(e, index) in everyDayInfo.label" :key="index">
                <div
                  class="item"
                  v-show="e.id == 26 && everyDayInfo.priceType == 2"
                >
                  <div class="left">新人专享</div>
                  <div class="right">
                    {{ e.desc }}
                  </div>
                </div>
                <div
                  class="item"
                  v-show="e.id == 22 && everyDayInfo.priceType == 3"
                >
                  <div class="left">首购优惠</div>
                  <div class="right">
                    {{ e.desc }}
                  </div>
                </div>
                <div
                  class="item"
                  v-show="
                    e.id == 10 &&
                    everyDayInfo.priceType != 2 &&
                    everyDayInfo.priceType != 3
                  "
                >
                  <div class="left">特价</div>
                  <div class="right">
                    {{ e.desc }}
                  </div>
                </div>
                <div
                  class="item"
                  v-show="
                    e.id == 17 &&
                    everyDayInfo.priceType != 2 &&
                    everyDayInfo.priceType != 3
                  "
                >
                  <div class="left">换</div>
                  <div class="right">
                    {{ e.desc }}
                  </div>
                </div>
                <div
                  class="item"
                  v-show="
                    e.id == 4 &&
                    everyDayInfo.priceType != 2 &&
                    everyDayInfo.priceType != 3
                  "
                >
                  <div class="left">赠</div>
                  <div class="right">
                    {{ e.desc }}
                  </div>
                </div>
              </div>
              <div
                class="item"
                v-show="
                  everyDayInfo.coupon == 1 &&
                  everyDayInfo.priceType != 2 &&
                  everyDayInfo.priceType != 3
                "
              >
                <div class="left">券</div>
                <div class="right">
                  {{ everyDayInfo.couponmsg }}
                </div>
              </div>
            </div>
          </div>
          <div class="info_block">
            <div class="title">产品参数</div>
            <div class="item">
              <span class="name">生产厂家</span
              ><span class="value">{{ everyDayInfo.manufacturerName }}</span>
            </div>
            <div class="item">
              <span class="name">规格</span
              ><span class="value">{{ everyDayInfo.specification }}</span>
            </div>
            <div class="item">
              <span class="name">效期</span
              ><span class="value">{{ everyDayInfo.expirationDate }}</span>
            </div>
            <div class="item">
              <span class="name">生产批准</span
              ><span class="value">{{ everyDayInfo.licenseNumber }}</span>
            </div>
            <div class="item">
              <span class="name">包装单位</span
              ><span class="value">{{ everyDayInfo.unit }}</span>
            </div>
            <div class="item">
              <span class="name">件装量</span
              ><span class="value">{{ everyDayInfo.piece }}</span>
            </div>
          </div>
        </div>
        <div class="item1">
          <span class="name" v-if="everyDayInfo.quantity <= 0"
            >购买数量(库存:<span style="color: red">缺货</span>)</span
          >
          <span class="name" v-if="everyDayInfo.quantity > 0"
            >购买数量(库存:{{
              everyDayInfo.quantity > 800 ? "充裕" : everyDayInfo.quantity
            }})</span
          >
          <span class="value">限购:</span
          ><span class="num">{{ everyDayInfo.maxBuyNumber }}</span>
          <span class="btn">
            <div class="img" @click="goodsAdd.sub(everyDayInfo)">-</div>
            <div class="input">
              <input
                type="number"
                v-model.number="everyDayInfo.initializeMinimum"
                @blur="goodsAdd.onChange(everyDayInfo)"
              />
            </div>
            <div class="img" @click="goodsAdd.plus(everyDayInfo)">+</div>
          </span>
        </div>
        <div class="btn_block" @click="submit(everyDayInfo)">
          <img src="../assets/image/btn.png" />
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import { postRequest } from "../api/index";
import url from "../axios/apiUrl";
import Xpng from "@/assets/image/X.png";
export default {
  props: {
    show: {
      type: [Boolean],
      default: false,
    },
    everyDayInfo: {},
    type: String,
    is119: false,
  },
  data() {
    return {
      Xpng,
    };
  },
  mounted() {},
  methods: {
    //是否显示卷后价
    showCouponPrice(value) {
      if (typeof value == "number") {
        if (value == 0) {
          return "定价中";
        } else if (value == -1) {
          return "加盟可见";
        } else {
          return "券后￥" + value.toFixed(2);
        }
      }
    },
    //计算购买量
    getNum(item, index, everyDayInfo) {
      if (index == 0) {
        return item + everyDayInfo.unit + "起";
      }
      return (
        item +
        "~" +
        (everyDayInfo.tieredPricingRules[index - 1].quantity - 1) +
        everyDayInfo.unit
      );
    },
    //加入购物车
    async submit(item) {
      if (item.quantity != 0) {
        if (item.restriction == 0) {
          let res = await postRequest(url.addShopCarNew, {
            goodsId: item.id,
            itemType: item.itemType,
            goodsQuantity: item.initializeMinimum,
          });
          if (res.data.code == "000000") {
            this.$toast("加入购物车成功~");
            this.close();
          }
          if (res.data.message == "系统异常") {
            this.$toast("网络异常，请稍后再试");
          } else if (res.data.code != "000000") {
            this.close();
            this.$toast(res.data.message);
          }
        } else {
          if (item.initializeMinimum > item.maximum) {
            this.$toast("已超过最大购买量，不能加入购物车");
          } else {
            let res = await postRequest(url.addShopCarNew, {
              goodsId: item.id,
              itemType: item.itemType,
              goodsQuantity: item.initializeMinimum,
            });
            if (res.data.code == "000000") {
              this.$toast("加入购物车成功~");
              this.close();
            }
            if (res.data.message == "系统异常") {
              this.$toast("网络异常，请稍后再试");
            } else if (res.data.code != "000000") {
              this.close();
              this.$toast(res.data.message);
            }
          }
        }
      } else {
        this.$toast("该商品已售罄");
      }
    },
    close() {
      this.$emit("close");
    },
  },
};
</script>
<style lang="less" scoped>
.dialog {
  background: rgba(0, 0, 0, 0.49);
  width: 100%;
  position: fixed;
  height: 100%;
  top: 0px;
  z-index: 9999999;
  /deep/ .van-action-sheet {
    height: 80%;
  }
  /deep/ .van-popup {
    overflow-y: visible;
  }
  .dialog_area {
    position: relative;
    .dialog_area_top {
      max-height: 13.5rem;
      overflow-y: auto;
    }
    .goods_block {
      width: auto;
      height: 280px;
      padding: 63px 24px 0 24px;
      display: flex;

      .box {
        position: relative;
        z-index: 4;
        width: 280px;
        height: 280px;
        img {
          width: 100%;
          height: 100%;
        }
        .box_price1 {
          position: absolute;
          bottom: 5px;
          left: 10px;
          width: 104px;
          height: 42px;
          line-height: 42px;
          font-size: 30px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: JUSTIFIED;
          background-image: linear-gradient(180deg, #ffffff 0%, #ffd313 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          text-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);
        }
      }

      .left {
        width: 280px;
        height: 280px;
        opacity: 1;
        background: #ffffff;
        border-radius: 8px;
        margin-right: 24px;
        .picture {
          position: relative;
          width: 260px;
          height: 260px;
          // top: 64px;
          .advertTag {
            position: absolute;
            width: 68px;
            height: 78px;
            top: 0;
            right: 0;
            img {
              width: 68px;
              height: 78px;
            }
          }
          .hgimg {
            z-index: 99;
            position: absolute;
            width: 3.466667rem;
            bottom: 0px;
            left: 0px;
          }
          .box_price1 {
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 3.443333rem;
            height: 0.773333rem;
            line-height: 0.773333rem;
            font-family: PingFang SC, PingFang SC-Semibold;
            font-weight: 600;
            display: flex;
            align-items: flex-end;
            color: #ffffff;
            text-align: center;
            z-index: 99999;
            white-space: nowrap;
            .tip {
              display: inline-block;
              font-size: 20px;
              width: 8px;
              padding-top: 2px;
              z-index: 9;
              vertical-align: top;
            }
            .price {
              position: relative;
              font-size: 38px;
              height: 100%;
              overflow: hidden;
              display: inline-block;
              text-align: left;
            }
            .boxPrice1Left {
              display: flex;
              width: 1.26rem;
              flex-direction: column;
              justify-content: center;
            }
            .boxPrice1Width {
              width: 1.06rem;
            }

            .boxPrice1Right {
              width: 2.233333rem;
              height: 0.673333rem;
              line-height: 0.673333rem;
              text-align: left;
              box-sizing: border-box;
              margin-top: 4px;
            }
          }
          .pictureTop {
            width: 260px;
            height: 260px;
          }
          .pictureTopItem {
            width: 260px;
            height: 260px;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
      }

      .right {
        flex: 1;

        .text1 {
          width: 100%;
          height: 90px;
          opacity: 1;
          font-size: 32px;
          font-family: PingFang, PingFang-Medium;
          font-weight: 500;
          text-align: justify;
          color: #333333;
          line-height: 45px;
          margin-bottom: 1px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; //保留多少行
          overflow: hidden;
        }

        .text2 {
          // display: flex;
          padding-bottom: 6px;

          .text2_left {
            flex: 1;
            height: 40px;
            opacity: 1;
            // font-size: 24px;
            font-family: PingFang, PingFang-Semibold;
            text-align: justify;
            color: #f34444;
            line-height: 40px;
          }
          .text2_left1 {
            flex: 1;
            height: 40px;
            opacity: 1;
            font-size: 24px;
            font-family: PingFang, PingFang-Semibold;
            text-align: justify;
            text-decoration: line-through;
            color: #999999;
            line-height: 40px;
          }
        }
        .textVip {
          height: 35px;
          display: inline-block;
          line-height: 35px;
          padding: 0 10px;
          border-radius: 8px;
          opacity: 1;
          font-size: 24px;
          background-color: #fff1d9;
          font-family: PingFang, PingFang-Regular;
          font-weight: 400;
          text-align: left;
          color: #333333;
          line-height: 33px;
          margin-bottom: 7px;
          img {
            width: 34px;
            height: 20px;
            vertical-align: middle;
          }
        }
        .text3 {
          height: 33px;
          opacity: 1;
          font-size: 24px;
          font-family: PingFang, PingFang-Regular;
          font-weight: 400;
          text-align: justify;
          color: #666666;
          line-height: 33px;
          padding-bottom: 5px;
        }
      }
    }

    .ladder_block {
      margin: 10px 24px 12px 24px;
      width: auto;
      opacity: 1;
      background: #f9fbff;
      border-radius: 10px;
      display: flex;
      height: 112px;

      // .title {
      //   width: 100%;
      //   height: 60px;
      //   opacity: 1;
      //   line-height: 60px;
      //   background: #f34444;
      //   border-radius: 8px 8px 0px 0px;
      //   display: flex;
      //   color: #fff;
      //   .left {
      //     width: 30%;
      //     text-align: left;
      //     padding-left: 24px;
      //   }

      //   .center {
      //     text-align: left;
      //     flex: 1;
      //   }

      //   .right {
      //     width: 30%;
      //     text-align: left;
      //   }
      // }
      .text:nth-child(1) .price {
        color: #f34444 !important;
      }
      .text {
        // width: 100%;
        // height: 48px;
        // line-height: 48px;
        // opacity: 1;
        // border-radius: 8px 8px 0px 0px;
        // display: flex;
        // color: #f34444;
        // &:last-child {
        //   padding-bottom: 10px;
        // }
        // .left {
        //   width: 30%;
        //   text-align: left;
        //   padding-left: 24px;
        // }
        // .center {
        //   text-align: left;
        //   flex: 1;
        // }
        // .right {
        //   width: 30%;
        //   text-align: left;
        //   color: #333333;
        // }
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        span {
          flex: 1;
          line-height: 56px;
          text-align: center;
        }
        .price {
          color: #333333;
          font-size: 28px;
        }
        .quantity {
          color: #666666;
          font-size: 24px;
        }
      }
    }

    .btn_block {
      position: fixed;
      bottom: 0px;
      background: #fff;
      width: auto;
      height: auto;
      opacity: 1;
      margin: 0 24px;
      padding-bottom: 10px;
      z-index: 6666;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .info_block_discount {
      display: inline-block;
      width: 100%;
      height: 100%;
      .title {
        width: auto;
        height: 40px;
        opacity: 1;
        font-size: 28px;
        font-family: PingFang, PingFang-Medium;
        font-weight: 500;
        text-align: justify;
        color: #333333;
        line-height: 40px;
        margin: 12px 24px;
        .titleTeg {
          background-color: #f5f7fb;
        }
      }
      .item {
        width: auto;
        height: 60px;
        border-radius: 1px;
        margin: 0 24px 12px;
        padding-left: 24px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border-radius: 12px;
        background: #f5f7fb;

        .left {
          display: inline-block;
          height: 36px;
          padding: 0 10px;
          border-radius: 1px;
          line-height: 36px;
          text-align: center;
          color: #fff;
          font-size: 26px;
          font-family: PingFang-SC-Regular, PingFang-SC;
          font-weight: 400;
          border-radius: 16px;
          color: #f34444;
          border: 1px solid #f34444;
        }
        .right {
          padding-left: 20px;
          display: inline-block;
          width: 7.4rem;
          height: 36px;
          line-height: 36px;
          border-radius: 1px;
          margin-left: 12px;
          font-size: 24px;
          font-family: PingFang-SC-Regular, PingFang-SC;
          font-weight: 400;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .info_block {
      display: inline-block;
      width: 100%;
      .title {
        width: auto;
        height: 40px;
        opacity: 1;
        font-size: 28px;
        font-family: PingFang, PingFang-Medium;
        font-weight: 500;
        text-align: justify;
        color: #333333;
        line-height: 40px;
        margin: 12px 24px;
      }

      .item {
        width: auto;
        height: 37px;
        line-height: 37px;
        opacity: 1;
        font-size: 26px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #666666;
        margin: 0 24px;
        box-sizing: border-box;
        margin-bottom: 19px;

        .name {
          display: inline-block;
          width: 20%;
          text-align: left;
          height: 30px;
          line-height: 30px;
        }

        .value {
          display: inline-block;
          text-align: right;
          width: 80%;
          overflow: hidden;
          height: 30px;
          line-height: 30px;
        }
      }
    }
    .item1 {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 110px;
      margin: 0 24px;
      background: #fff;
      padding-bottom: 20px;
      text-align: left;
      height: 60px;
      line-height: 60px;
      width: auto;
      display: flex;

      .name {
        display: inline-block;
        width: 270px;
        height: 60px;
        opacity: 1;
        font-size: 26px;
        font-family: PingFang, PingFang-Regular;
        font-weight: 400;
        color: #666666;
        line-height: 60px;
        overflow: hidden;
      }

      .value {
        display: inline-block;
        width: 65px;
        height: 60px;
        opacity: 1;
        font-size: 26px;
        font-family: PingFang, PingFang-Regular;
        font-weight: 400;
        color: #666666;
        line-height: 60px;
      }

      .num {
        display: inline-block;
        width: 110px;
        height: 60px;
        line-height: 60px;
        overflow: hidden;
      }

      .btn {
        text-align: right;
        flex: 1;
        height: 60px;
        line-height: 60px;
        font-size: 40px;

        .img {
          display: inline-block;
          width: 60px;
          height: 60px;
          background: #e1e1e1;
          text-align: center;
        }

        .input {
          height: 60px;
          line-height: 60px;
          display: inline-block;
          width: 100px;
          overflow: hidden;
          vertical-align: middle;

          input {
            text-align: center;
            width: 100%;
            border: none;
          }
        }
      }
    }
  }
  .action-sheet {
    .close {
      position: absolute;
      right: 24px;
      top: 16px;
      z-index: 999;
      background: #fff;

      img {
        display: inline-block;
        width: 44px;
        height: 44px;
      }
    }
  }
}
.font18 {
  font-size: 0.446667rem;
}
.font12 {
  font-size: 0.24rem;
}
.font11 {
  font-size: 11px;
}
.font8 {
  font-size: 0.24rem;
  transform: scale(0.65);
}
.fw {
  font-weight: 600;
}
.fw500 {
  font-weight: 500;
}
.fs16 {
  font-size: 0.4rem;
}

.font14 {
  font-size: 0.35rem;
}
.color666 {
  color: #666666;
}
.color333 {
  color: #333333;
}
.mr {
  margin-right: 0.24rem;
}
.th {
  text-decoration: line-through;
}
.colorf34 {
  color: #f34444;
}
.mb{
  margin-bottom: 4px;
}
.mb6{
  margin-bottom: .12rem;
}
</style>
